<style lang="scss" scoped>
.licence-list {
  .el-card {
    padding: 0 !important;
  }
}
</style>
<template>
  <div class="licence-list">
    <!-- 导出 -->
    <el-row class="import_global">
      <el-button
        type="warning"
        icon="el-icon-download"
        size="small"
        round
        @click="importVisible = true"
      >
        导入许可证
      </el-button>
    </el-row>
    <!-- 导入 -->
    <upload-com
      title="导入订单"
      :visibleProp="importVisible"
      @close="importVisible = false"
    />
    <!-- 查询 -->
    <el-form :inline="true" :model="form" label-width="80px" class="query-form">
      <el-col :span="8">
        <el-form-item label="收货单位">
          <el-input v-model="form.user" placeholder="输入收货单位"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="客户">
          <el-select v-model="form.name" placeholder="输入客户名">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="提单柜号">
          <el-input v-model="form.user" placeholder="提单号/柜号"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="报关单号">
          <el-input v-model="form.user" placeholder="输入报关单号"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="时间">
          <el-select v-model="form.name" placeholder="请选择">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-row class="btn" type="flex" justify="center">
        <el-button type="primary" @click="onQuery">查询</el-button>
        <el-button @click="onQuery">重置</el-button>
      </el-row>
    </el-form>
    <!-- 表格列表 -->
    <el-card class="table" v-for="(item, index) in tableList" :key="index">
      <div slot="header">
        苹果(鲜苹果)波兰深圳湾公路运输 总可用余量：2,100,000kg ≈ 105 柜总使用：0kg
      </div>
      <el-table border :data="[item]">
        <el-table-column prop="date" label="许可证" width="180"> </el-table-column>
        <el-table-column prop="name" label="剩余数量" width="180"> </el-table-column>
        <el-table-column prop="address" label="有效期限"> </el-table-column>
        <el-table-column prop="address" label="备注"> </el-table-column>
      </el-table>
    </el-card>
    <!-- table分页 -->
    <el-pagination
      background
      layout="prev, pager, next, sizes, total, jumper"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="page.size"
      :total="page.total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
  </div>
</template>

<script>
import UploadCom from '@/components/UploadCom.vue'

export default {
  name: 'OrderList',
  components: {
    UploadCom
  },
  data() {
    return {
      form: {
        user: '',
        name: ''
      },
      tableList: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ],
      page: {
        size: 20,
        total: 0,
        currpage: 1
      },
      column: [
        { label: '订单', prop: 'containerNo' },
        { label: '运输', prop: 'containerNo2' },
        { label: '时间', prop: 'containerNo3' },
        { label: '配送', prop: 'containerNo4' },
        { label: '操作', slot: true }
      ],
      importVisible: false
    }
  },
  methods: {
    onQuery() {
      this.fetch(1)
    },
    handleCurrentChange(cpage) {
      this.page.currpage = cpage
      this.fetch()
    },
    handleSizeChange(psize) {
      this.page.size = psize
      this.fetch()
    },
    async fetch(currpage = 1) {
      if (currpage === 1) this.page.currpage = 1
      const { data, code, total } = await this.$axios.post('order/queryList', {
        data: {
          pageNo: this.page.currpage,
          pageSize: this.page.size
        }
      })
      if (code === 200 && data) {
        this.tableList = data.list
        this.page.total = total
      }
    }
  },
  mounted() {
    this.onQuery()
  }
}
</script>
